<template>
	<view class="" >
		<!-- <view class="item"> -->
			<view class="cont_li" style="display: flex;margin: 30px 0px;">
				<!-- <image style="width: 30rpx;height: 35rpx;margin: 5px 0px;" src="/static/img/ljlc/yd.png" mode=""></image>
				<view style="color: #fff;margin: 0 10px;" class="cont_li_label">运单编号:</view>
				<view  style="color: #fff;" class="cont_li_value">{{essentialData.billNo}} </view> -->
			</view>
			<view class="top_hw" >
				<view class="top_tle">
				<view class="top_left">
					
					<image  v-if="info.levels == 'A'" style="width: 181rpx;height: 181rpx;" src="/static/img/qr-blur.png" mode=""></image>
					<image v-else-if="info.levels == 'C'" style="width: 181rpx;height: 181rpx;" src="/static/img/qr-red.png" mode=""></image>
					<image v-else-if="info.levels == 'B'" style="width: 181rpx;height: 181rpx;" src="/static/img/qr-yellow.png" mode=""></image>
					
					
					<!-- <text style="color: #168EEC;font-size: 12px;">附件1</text> -->
				</view>	
				<view class="" style="margin: 15px;">
					
					
					<text >{{essentialData.baseOwnerVo.ownerName}}</text>
				</view>	
				</view>
			      <view class="item sy" >
			      	
			      	<view class="item_cont">
			      		
			      		<view class="cont_li">
			      			<view class="cont_li_label">许可证号:</view>
			      			<view class="cont_li_value">{{essentialData.baseOwnerVo.mcertId}}</view>
			      		</view>
			      		<view class="cont_li">
			      			<view class="cont_li_label">有效期起:</view>
			      			<view class="cont_li_value">{{essentialData.baseOwnerVo.firstDate}}</view>
			      		</view>
						<view class="cont_li">
							<view class="cont_li_label">有效期止:</view>
							<view class="cont_li_value">{{essentialData.baseOwnerVo.expireDate}}</view>
						</view>
			      	</view>
			      </view>
				<view class="xian sy">
					
				</view>
				<view class="item sy">
					
					<view class="item_cont">
						<view class="item_top">
							<view class="item_title">车辆信息</view>
						</view>
						<view class="cont_li">
									<view class="cont_li_label">车辆号牌（颜色）:</view>
									<view class="cont_li_value">{{essentialData.vehicleVo.vehCode}}
						<text v-if="essentialData.vehicleVo.vehColor == '黄色'" class="carys">黄</text>
							<text class="carys1" v-if="essentialData.vehicleVo.vehColor == '蓝色'">蓝</text>	
						<text class="carys2" v-if="essentialData.vehicleVo.vehColor == '黑色'">黑</text>			
							<text class="carys3" v-if="essentialData.vehicleVo.vehColor == '白色'">白</text>	
								<text class="carys4" v-if="essentialData.vehicleVo.vehColor == '绿色'">绿</text>	
								<text class="carys4" v-if="essentialData.vehicleVo.vehColor == '黄绿色'">绿</text>
								<text class="carys4" v-if="essentialData.vehicleVo.vehColor == '渐变绿'">绿</text>
									</view>
								</view>
								<view class="cont_li">
									<view class="cont_li_label">道路运输证号:</view>
									<view class="cont_li_value">{{essentialData.vehicleVo.ccertId}}</view>
								</view>
								<view class="cont_li">
									<view class="cont_li_label">有效期起:</view>
									<view class="cont_li_value">{{essentialData.vehicleVo.firstDate}}</view>
								</view>
								<view class="cont_li">
									<view class="cont_li_label">有效期止:</view>
									<view class="cont_li_value">{{essentialData.vehicleVo.expireDate}}</view>
								</view>
								<view class="cont_li">
									<view class="cont_li_label">下次年审日期:</view>
									<view class="cont_li_value">{{essentialData.vehicleVo.nextCheckDate}}</view>
								</view>
								<view class="cont_li">
									<view class="cont_li_label">罐体检测有效期:</view>
									<view class="cont_li_value">{{essentialData.vehicleVo.havTank=='0' ? '无': essentialData.vehicleVo.tankValidDate || '无'}}</view>
								</view>
					</view>
				</view>
				
				
			</view>
			<!--  -->
						
			<!--  -->
			<view class="item " style="margin-top: 10px;padding: 10px;">
				<!-- <view class="black_bar"></view> -->
				
				<view class="item_cont">
					<view class="item_top">
						<view class="item_title">驾驶员</view>
					</view>
					<view class="cont_li">
						<view class="cont_li_label">姓名:</view>
						<view class="cont_li_value">{{essentialData.driverList[0].name}}</view>
					</view>
					<view class="item_cont" style="padding: 0;" v-for="(item,i) in essentialData.driverList" >
						<view class="cont_li " style="display: flex;justify-content: space-between;">
							<view class="cont_li_label">从业类别:</view>
							<view style="float: right;" class="cont_li_value as">{{item.qualificaCategory}}</view>
						</view>
					
					<view class="cont_li">
						<view class="cont_li_label">有效期至:</view>
						<view class="cont_li_value as">{{item.qualifiCertificateTo}}</view>
					</view>
					</view>
			
				</view>
			</view>
		<!--  -->
					
	<view class="item " style="margin-top: 10px;padding: 10px;">
		<!-- <view class="black_bar"></view> -->
		
		<view class="item_cont">
			<view class="item_top">
				<view class="item_title">押运员</view>
			</view>
			<view class="cont_li">
				<view class="cont_li_label">姓名:</view>
				<view class="cont_li_value">{{essentialData.escortList[0].name}}</view>
			</view>
			<view class="item_cont" style="padding: 0;" v-for="(item,i) in essentialData.escortList" >
				<view class="cont_li">
					<view class="cont_li_label">从业类别:</view>
					<view  class="cont_li_value as">{{item.qualificaCategory}}</view>
				</view>
			
			<view class="cont_li">
				<view class="cont_li_label">有效期至:</view>
				<view class="cont_li_value as">{{item.qualifiCertificateTo}}</view>
			</view>
			</view>
	
		</view>
	</view>
		
	
	</view>
</template>

<script>
	import {
		rankingFirm
	} from '@/common/api/monitor.js'
	export default {
		data() {
			return {
				essentialData: {},
				info: {
					levels: "",
				}
			};
		},
		mounted() {
			// if (!this.$store.state.roadCheckInfo || !this.$store.state.roadCheckInfo.billNo) {
			// 	this.$goBack('./roadCheck', 1)
			// } else {
			this.essentialData = this.$store.state.roadCheckEssential
			console.log(this.$store.state.roadCheckEssential,164)
			
			// }

			const params = {
				archiveCode: this.essentialData.baseOwnerVo.mcertId,
				archiveName: this.essentialData.baseOwnerVo.ownerName,
			};

			rankingFirm(params).then(res => {
				console.log(res,169)
				if (res.data.data.records.length != 0) {
					this.info = res.data.data.records[0];
					console.log(this.info,176)
				}
			})

		},

		methods: {
			compareTime(t1) {
				let time = new Date()
				const _PlanEndTime = new Date(t1)
				const _PlanStartTime = new Date(time.toLocaleDateString())

				return _PlanEndTime > _PlanStartTime
			}
		},
	}
</script>

<style lang="scss">
	.carys{ //黄
		width: 40rpx;
		height: 40rpx;
		background: #EFD400;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}
	.carys1{ //蓝
		width: 40rpx;
		height: 40rpx;
		background: #168EEC;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.carys2{ //黑
		width: 40rpx;
		height: 40rpx;
		background: #21231e;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.carys3{ //白
		width: 40rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}
	.carys4{ //绿
		width: 40rpx;
		height: 40rpx;
		background: #1a9e34;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.top_hw{
		width: 692rpx;
		height: 472px;
		background: #FFFFFF;
		border-radius: 18rpx;
		// padding: 15px;
		box-sizing: border-box;
       .top_tle{
		   display: flex;
		   justify-content: space-between;
		   // padding: 15px;
		   // box-sizing: border-box;
		  
		   .top_left{
			   width: 181rpx;
			   height: 181rpx;
			   background: #FFFFFF;
			   border-radius: 14rpx;
			   border: 4rpx solid #168EEC;
			   transform: translateY(-40px);
			   margin-left: 15px;
			   // .aa{
				  //  transform: translateY(-10px);
			   // }
		   }
		   .top_right{
			   width: 101rpx;
			   height: 36rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 400;
			   font-size: 25rpx;
			   color: #449D80;
			   line-height: 36rpx;
			   text-align: left;
			   font-style: normal;
			   margin: 15px;
			   
		   }
	   }
	   .limsx{
		   width: 0rpx;
		   height: 61rpx;
		   border: 2rpx dashed  #4D6CA9;
		       margin-left: 7px;
	   }
	   .q{
		   width: 40rpx;
		   height: 40rpx;
		   background: #168EEC;
		   border-radius: 7rpx;
		    color: #fff;
			text-align: center;
			line-height: 40rpx;
			font-size: 25rpx;
	   }
	   .z{
		  width: 40rpx;
		  height: 40rpx;
		  background: #B5B9C2;
		  border-radius: 7rpx; 
		  color: #fff;
		  text-align: center;
		  line-height: 40rpx;
		  font-size: 25rpx;
	   }
	   .txt{
		   width: 348rpx;
		   height: 40rpx;
		   font-family: PingFangSC, PingFang SC;
		   font-weight: 500;
		   font-size: 29rpx;
		   color: #333333;
		   line-height: 40rpx;
		   text-align: left;
		   font-style: normal;
	   }
	   .rq{
		   width: 370rpx;
		   height: 36rpx;
		   font-family: PingFangSC, PingFang SC;
		   font-weight: 400;
		   font-size: 25rpx;
		   color: #999999;
		   line-height: 36rpx;
		   text-align: left;
		   font-style: normal;
	   }
	   .hwbox{
		   width: 632rpx;
		   // height: 121px;
		   background: rgba(22,142,236,0.05);
		   border-radius: 7rpx;
		   margin-top: 20rpx;
		       padding: 10px;
		       box-sizing: border-box;
			   position:relative;
		   .hwtle{
			   width: 116rpx;
			   height: 40rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 500;
			   font-size: 29rpx;
			   color: #168EEC;
			   line-height: 40rpx;
			   text-align: left;
			   font-style: normal;
			   // margin: 20rpx;
		   }
		   .wz{
			    position: absolute; 
		   }
		   .hwtb{
			   width: 144rpx;
			   height: 139rpx;
			   position: absolute;
			   right: 13px;
			       top: 32px;
				   background: url(/static/img/ljlc/hw_img.png) no-repeat;
				   			background-size: 100% 100%;
			   
		   }
	   }
	}
	.item_top {
		width: 107rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #168EEC;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		
	}
.item{
	width: 100%;
	// height: 250rpx;
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 0 10px;
	box-sizing: border-box;
	// margin-top: 15px;
	  // transform: translateY(-40px);
}
.sy{
	transform: translateY(-30px);
}
	.cont_li {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			// justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;

		
		}
.item_title{
	width: 132rpx;
	// margin-top: 5px;
}
	.item_cont {
		width: calc(100% - 40rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 20rpx;
		color: #666666;
		font-size: 28rpx;
		background: #fff;

		.cont_li {
			width: 100%;
			padding: 22rpx 0;
			display: flex;
			// justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;

			// .cont_li_label {
			// 	// width: 256rpx;
			// }

			// .cont_li_value {
			// 	// flex: 1;
			// }
		}
	}

	// .black_bar {
	// 	width: 100%;
	// 	height: 20rpx;
	// 	background: #F5F5F5;
	// }
	.itemz{
		width: 692rpx;
		height: 1627rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 15px;
	}
	.xian{
		width: 636rpx;
		height: 0rpx;
		border: 2rpx dashed #F1F1F1;
		margin-bottom: 20rpx;
	}
	.as{
	transform: translateX(23px);
	}
</style>